<template>
  <div class="stream">
      <div class="top_tool">
        <span>StreamLiving</span>
        <span>Upload Video</span>
        <span> 
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="grey"
            active-value="100"
            inactive-value="0">
          </el-switch>
        </span>
        <a><i style="font-size:20px;color:red;background:black;border-radius:50%;" class="el-icon-error"></i></a>
        <span class="radio">
            <el-checkbox v-model="checkedRelay">Relay</el-checkbox>
        </span>
          <span class="radio">
            <el-checkbox v-model="checkedLoop">Loop</el-checkbox>
        </span>
          <span class="radio">
            <el-checkbox v-model="checkedRelaymute">Relay mute</el-checkbox>
        </span>
          <span class="radio">
            <el-checkbox v-model="checkedLocalmute">Localmute</el-checkbox>
        </span>
        <span>
          Full Screen
        </span>
      </div>
  </div>
</template>

<script>
export default {
  name: 'StreamLiving',
  data () {
    return {
     checkedRelay:true,
     checkedLoop:true,
     checkedRelaymute:true,
     checkedLocalmute:true,
     value: ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.stream{
  .top_tool{
    height: 60px;
    width: 100%;
    background-color: #274582;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #ffffff;
    span{
      margin-left: 20px;
    }
    a{
      margin-left: 20px;
    }
  }
}

</style>
